<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML表格标签案例</title>
</head>
<body>
    <h4>一列:</h4>
    <table border="1">
    <tr>
        <td>100</td>
    </tr>
    </table>
    
    <h4>一行三列:</h4>
    <table border="1">
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
    </table>
    
    <h4>两行三列:</h4>
    <table border="1">
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
    <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
    </tr>
    </table>

    <h4>使用表头标签并定义边框属性</h4>

    <table border="2">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

    <h4>三行三列的表格：</h4>

    <table border="2px" width="500px" bgcolor="pink"
    bordercolor="yellow" cellspacing="0">
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
        </tr>
    </table>

    <h4>表格的合并</h4>
    <table border="1" width="400" height="400" align="center">
        <tr align="center">
            <!-- 跨列合并俩个单元格，删掉第一行第二个单元格 -->
          <td colspan="2">11</td>
          <!--<td>12</td>-->
          <!-- 跨行合并俩个单元格，删掉第二行第三个单元格 -->
          <td rowspan="2">13</td>
        </tr>
        <tr align="center">
          <td>21</td>
          <td>22</td>
          <!-- 跨行合并俩个单元格，删掉第二行第三个单元格 -->
          <!--<td>23</td>-->
        </tr>
        <tr align="center">
          <!--<td>31</td>-->
          <!-- 跨列合并2个单元格，删掉第三行第三个td -->
          <td>32</td>
          <!--<td>33</td>-->
        </tr>
    </table>
</body>
</html>